*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html,body {
    overflow:hidden;
    overflow-y:auto;
}
ul li {
    list-style: none;
}
img {
    width: 100%;
}
body {
    min-width: 320px;
    margin: 0 auto;
    background-color: #fff;
  }
  a {
    text-decoration: none;
    color: #707070;
  }
  

header {
    width: 100%;
    height: 80px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0 40px;
    align-items: center;
    position: relative;
    font-weight: 800;
    z-index: 200;
}
.logo{
    font-size: 24px;
    font-weight: 600;
    color:#fff;
  }
header nav {
    justify-self: end;
}
header nav a{
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    margin: 0 24px;
  }
 header .burger {
      display: none;
  }
  /* 粘性导航 */
  header.sticky{
    position: fixed;
    background-color: white;
    box-shadow: 0 0 18px rgba(0,0,0,0.2);
    animation: dropDown 0.5s ease-in-out forwards;
  }
  header.sticky .logo,
  header.sticky nav a{
        color: #333;
  }
  @keyframes dropDown{
    from{
      transform: translateY(-100px);
    }
    to{
      transform: translateY(0);
    }
  }


  
  .service-item .service-title{
    font-size: 20px;
  }


.content {
    position: relative;
    top: -80px;
    z-index: 100;
}
.home {
    height: 5.625rem;
    background-image: linear-gradient(to top ,#381be5, #08d5c6);
    position: relative;
}
.home div:nth-child(1) {
    position: absolute;
    width: 100%;
    height: 5.625rem;
    overflow: hidden;
}
.home .zhuti {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0 auto;
    width: 7.375rem;
    height: 5.625rem;
    transform: translate(-50%,0);
}
.zhuti ul {
    position: relative;
}
.zhuti ul li {
    position: absolute;
}
.zhuti ul li:nth-child(2) {
 top: 1.253125rem;
 left: 50%;
 margin: 0 auto;
 width: 4.53125rem;
 transform: translate(-50%,0);
}
.zhuti ul li:nth-child(3) {
    top: 2.44375rem;
    left: 50%;
    margin: 0 auto;
    width: 4.023438rem;
    transform: translate(-50%,0);
   }
   /* 左手 */
   .zhuti ul li:nth-child(4) {
    top: 3.125rem;
    left: 50%;
    margin: 0 auto;
    width: 1.453125rem;
    transform: translate(-95%,0);
    animation: scale1 8s ease-in infinite;
}
@keyframes scale1 {
 0% {
     transform: scale(1);
     transform: translate(-95%,0);
 }
    33% {
        transform: scale(2);
        transform: translate(-100%,3%);
    }
    66% {
     transform: scale(2);
     transform: translate(-100%,3%);
 }
 100% {
     transform: scale(1);
     transform: translate(-95%,0);
 }
   }

   /* 右手 */
   .zhuti ul li:nth-child(5) {
    top: 3.125rem;
    left: 50%;
    margin: 0 auto;
    width: 1.453125rem;
    transform: translate(30%,0);
    animation: scale2 8s ease-in infinite;
   }
   @keyframes scale2 {
    0% {
        transform: scale(1);
        transform: translate(30%,0);
    }
       33% {
           transform: scale(2);
           transform: translate(35%,3%);
       }
       66% {
        transform: scale(2);
        transform: translate(35%,3%);
    }
    100% {
        transform: scale(1);
        transform: translate(30%,0);
    }
   }

   /* 星星装饰 */
   .zhuti ul li:nth-child(6) {
    top: 2.734375rem;
    left: 50%;
    margin: 0 auto;
    width: 2.734375rem;
    /* transform: translate(-30%,0); */
    animation: scale3 16s ease-in infinite;
   }
   @keyframes scale3 {
    0% {
        transform: scale(1);
        transform: translate(-40%,-15%);
    }
       33% {
           transform: scale(2);
           transform: translate(-40%,-10%);
       }
       66% {
        transform: scale(2);
        transform: translate(-40%,-65%);
    }
    100% {
        transform: scale(1);
        transform: translate(-40%,-15%);
    }
   }


   /* 技能点样式加动画 */
   .zhuti ul li:nth-child(7) {
    top: 3.515625rem;
    left: 50%;
    margin: 0 auto;
    width: .859375rem;
    /* transform: translate(-30%,0); */
    animation: scale4 6s ease-in infinite;
   }
   @keyframes scale4 {
    0% {
        transform: scale(1);
        transform: translate(-40%,-15%);
    }
       50% {
           transform: scale(2);
           transform: translate(-40%,-10%);
       }
    100% {
        transform: scale(1);
        transform: translate(-40%,-15%);
    }
   }

   .zhuti ul li:nth-child(8) {
    top: 3.359375rem;
    left: 40%;
    margin: 0 auto;
    width: .859375rem;
    /* transform: translate(-30%,0); */
    animation: scale5 6s ease-in infinite;
   }
   @keyframes scale5 {
    0% {
        transform: scale(1);
        transform: translate(-40%,-25%);
    }
       50% {
        transform: scale(2);
        transform: translate(-40%,-45%);
    }
    100% {
        transform: scale(1);
        transform: translate(-40%,-25%);
    }
   }


   .zhuti ul li:nth-child(9) {
    top: 2.96875rem;
    left: 50%;
    margin: 0 auto;
    width: .859375rem;
    /* transform: translate(-30%,0); */
    animation: scale6 6s ease-in infinite;
   }
   @keyframes scale6 {
    0% {
        transform: scale(1);
        transform: translate(-40%,-15%);
    }
       50% {
           transform: scale(2);
           transform: translate(-40%,-10%);
       }
    100% {
        transform: scale(1);
        transform: translate(-40%,-15%);
    }
   }

   .zhuti ul li:nth-child(10) {
    top: 3.359375rem;
    left: 60%;
    margin: 0 auto;
    width: .859375rem;
    /* transform: translate(-30%,0); */
    animation: scale7 6s ease-in infinite;
   }
   @keyframes scale7 {
    0% {
        transform: scale(1);
        transform: translate(-40%,-25%);
    }
       50% {
        transform: scale(2);
        transform: translate(-40%,-45%);
    }
    100% {
        transform: scale(1);
        transform: translate(-40%,-25%);
    }
   }
   .content {
       display: flex;
       align-items: content;
       justify-content: center;
       flex-direction: column;
   }
   section.intro {
       height: 5.625rem;
       background-color: #381be5;
       padding: .53125rem 0;
   }
   section.intro .title1 {
       position: relative;
       width: 10rem;
       height: .625rem;
       margin: 0 auto;
       /* overflow: hidden; */
   }
   .title1 h2 {
       position: absolute;
       font-size: .375rem;
       color: #fff;
   }
   .title1 img {
       position: absolute;
       top: .421875rem;
       width: 2.1875rem;
       height: .273438rem;
   }
   .title1 ul {
       position: absolute;
       right: 0;
   }
   .title1 ul li {
       width: .25rem;
       height: .078125rem;
       background-color: #fff;
   }
   .title1 ul li:nth-child(2) {
       margin: .195313rem 0;
   }
   .items {
       display: grid;
       grid-template-columns: repeat(2,1fr);
       grid-template-rows: 1.53125rem 1.53125rem;
       grid-column-gap: 1.5625rem;
       grid-row-gap: .625rem;
       width: 10rem;
       margin: .507813rem auto;
       color: #fff;
   }
   .items .item {
       display: grid;
       grid-template-columns: 2.96875rem 1fr;
   }
   .item .pic {
       position: relative;
       margin: 0 .390625rem;
       width: 2.265625rem;
       height: 1.515625rem;
       overflow: hidden;
   }
   .item p {
       font-size: .125rem;
       margin: .46875rem 0 0 .078125rem;
   }
   .item .pic p {
       position: absolute;
       font-size: .125rem;
       margin: .117188rem 0 0 .15625rem;
       z-index: 3;
   }
   .item .pic img {
       position: absolute;
       display: inline;
       width: 2.265625rem;
       z-index: 2;
   }
   section.me {
    background-color: #fff;
    padding: .53125rem 0;
    width: 10rem;
    margin: 0 auto;
}
.me .aboutme {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 5.828125rem;
    margin: 0 auto;
    box-shadow: .15625rem .15625rem .78125rem rgb(207, 207, 207);
}
.leftme {
    position: relative;
}
.leftme .picme {
    width: 3.359375rem;
    height: 5.828125rem;
    padding: .390625rem 0 .390625rem .390625rem;
    background-image: url(../images/作品02/ShadowOverlay.png);
    background-repeat:no-repeat;
    background-size:contain ;
    color: #fff;
}
.leftme .picme p {
    font-size: .140625rem;
}
.leftme .picme span {
    display: block;
    position: relative;
    margin: .078125rem 0 3.125rem 0;
}
.leftme .picme span i {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: .171875rem;
    height: .171875rem;
    background-image: url(../images/作品02/形状2.png);
    background-size: contain;
}
.leftme .picme span p {
    position: absolute;
    left: .1875rem;
    line-height: .171875rem;
}
.leftme .picme h4 {
    font-size: .140625rem;
    font-weight: 600;
}
.picme .email , .picme .phone {
    margin-bottom: .234375rem;
}
.leftme .photo {
    position: absolute;
    top: 30% ;
    left: 50% ;
    width: 1.640625rem;
    height: 2.1rem;
    background-color: #999;
}
.leftme .chang {
    position: absolute;
    top: 60% ;
    left: 80% ;
    width: .625rem;
    height: .03125rem;
    background-color: #2673ff;
}
.rightme {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: .390625rem .390625rem .390625rem 0;
}
.rightme .chang1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end;
    margin-bottom: .53125rem;
}
.rightme .chang1 li {
    width: .15625rem;
    height: .03125rem;
    margin: .015625rem 0;
    background-color: #2673ff;
}
.item1 div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item1 div img {
    width: .28125rem;
    height: .28125rem;
    margin-right: .109375rem;
}
.item1 div h2 {
    line-height: .28125rem;
}
.item1 .dian {
    position: relative;
    display: block;
    height: .046875rem;
    margin: .234375rem 0 .390625rem 0;
}
.item1 .dian span:nth-child(1) {
    display: block;
    height: .015625rem;
    background-color: #f1f1f1;
}
.item1 .dian span:nth-child(2) {
    position: absolute;
    right: 0;
    top: 50%;
    display: block;
    width: .046875rem;
    height: .046875rem;
    border-radius: 50%;
    background-color: #2673ff;
    transform: translate(0,-50%);
}
.rightme p {
    font-size: .140625rem;
}
.rightme .item2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .234375rem .234375rem;
    margin-bottom: .234375rem;
}
.rightme .item3 {
    display: flex;
    flex-direction: column;
    margin-bottom: .6875rem;
}
.rightme .item3 p {
    height: .234375rem;
}
.rightme .chang2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
    text-align:center;
}
.rightme .chang2 li {
    width: .9375rem;
    height: .34375rem;
    line-height: .34375rem;
}
.rightme .chang2 li p {
    padding-left: .234375rem;
}
.rightme .chang2 li:nth-child(1) {
    background-color: #2673ff;
    background-image: url(../images/作品02/网页.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.rightme .chang2 li:nth-child(2) {
    background-color: #3d47f7;
    background-image: url(../images/作品02/运营.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.rightme .chang2 li:nth-child(3) {
    background-color: #3b3c3d;
    background-image: url(../images/作品02/代码.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.rightme .chang2 li:nth-child(4) {
    background-color: #f2ad2b;
    background-image: url(../images/作品02/书籍.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.item4 {
    position: absolute;
    right: .390625rem;
    bottom: .390625rem;
    width: 1.054688rem;
    height: 1.054688rem;
}
.item4 img {
    float: right;
}
.me .ability {
    margin: 1.015625rem auto;
}
.ability1 {
    display: flex;
    flex-direction: row;
    margin: .109375rem 0;
}
.ability1 img {
    width: .28125rem;
    height: .28125rem;
    margin-right: .109375rem;
}
.ability2 ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 15px;
   
    padding: .265625rem 0;
}
.ability2 ul h3 {
    font-size: .1875rem;
    color: #2673ff;
    padding: .078125rem 0 ;
}
.ability3 {
    padding: .265625rem 0;
}
.ability3 h3 {
    font-size: .1875rem;
    color: #2673ff;
    padding: .078125rem 0 ;
}
.ability3 ul {
    display: flex;
    flex-direction: row;
}
.ability3 ul li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-right: .625rem;
}
.ability3 ul li img {
    display: block;
    margin: .078125rem 0;
    width: .515625rem;
    height: .515625rem;
}
.ability3 ul li p {
    font-size: .140625rem;
}
.works {
    position: relative;
    width: 10rem;
    margin: 1.015625rem auto;
}
.works1 {
    display: flex;
    flex-direction: row;
    margin: .109375rem 0;
}
.works1 img {
    width: .28125rem;
    height: .28125rem;
    margin-right: .109375rem;
}
.works2 {
    display: flex;
    flex-direction: row;
}
.works2 ul li:nth-child(1) {
    width: .0625rem;
    height: 1.40625rem;
    background-color: #1d41eb;
}
.works2 ul li:nth-child(2) {
    width: .0625rem;
    height: .78125rem;
    background-color: #3a76e4;
}
.works2 ul li:nth-child(3) {
    width: .0625rem;
    height: .3125rem;
    background-color: #5b5f6c;
}
.works2 .jingli {
    position: absolute;
    left: .0625rem;
    padding: .3125rem 0 .3125rem .875rem;
    background-color: #181818;
    background-image: url(../images/作品02/形状5拷贝4.png);
    background-repeat: no-repeat;
    background-size: contain;
    /* background-position: bottom; */
    color: #fff;
}
.jingli .company {
    display: flex;
    flex-direction: row;
}
.company span {
    display: flex;
    flex-direction: row;
    margin: .078125rem 0 ;
}
.company span h3 {
    line-height: .140625rem;
}
.company h4 {
    padding: .234375rem 0 .078125rem 0;
}
.company .xiucai h4 {
    color: #1653f0 ;
}
.company p {
    margin: .078125rem 0;
}
.jingli .company .xiucai span img {
    width: .140625rem;
    height: .140625rem;
    margin-right: .078125rem;
}
.jingli .company .huaimei span img {
    width: .140625rem;
    height: .140625rem;
    margin-right: .078125rem;
}
section.advertise {
    background-color: #fff;
    padding: .53125rem 0 ;
    background-image: url(../images/作品03/背景层.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center center;
}
.content section.figma {
    width: 70%;
    margin: 0 auto;
}
section.figma img{
    width: 100%;
    margin: 50px 0;
}
.advertise .xiangqing {
    width: 10rem;
    height: 8.90625rem;
    margin: .234375rem auto;
}
.xiangqing .ad1 {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.xiangqing .ad1 img:nth-child(1) {
    height: .351563rem;
    width: .351563rem;
    margin-right: .078125rem;
}
.xiangqing .ad1 p:nth-child(2) {
    height: .351563rem;
    line-height: .351563rem;
}
.xiangqing .ad1 div:nth-child(3) {
    height: .015625rem;
    width: 4.6875rem;
    padding-left: .390625rem;
    margin-left: .15625rem;
    background-color: #fff;
}
.xiangqing .ad1 p {
    color: #fff;
}
.xiangqing h3 {
    font-size: .375rem;
    padding: .234375rem 0 .234375rem .78125rem ;
    color: #fff;
    opacity: .3;
}
.xiangqing h4 {
    padding: .078125rem 0;
    font-size: .1875rem;
    color: #fff;
}
.xiangqing .ad2 {
    position: relative;
    width: 9.15625rem;
    height: 5.234375rem;
    margin: .46875rem auto;
    padding: .3125rem .46875rem;
    background-color: #fff;
    box-shadow: .10625rem .10625rem .325rem #ffffff86;
}
.ad2 .ad2a {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.ad2 .ad2a img {
    width: .578125rem;
}
.ad2 .ad2a div:nth-child(3) {
    width: .023438rem;
    height: .3125rem;
    margin: 0 .234375rem;
    background-color: #666;
}
.ad2 h4 {
    padding: .078125rem 0;
    font-size: .1875rem;
    color: #333;
}
.ad2 h6 {
    font-size: .109375rem;
    color: #999;
}
.ad2 p {
    font-size: .140625rem;
    color: #333;
}
.ad2 .ad2b {
    position: absolute;
    top: 1.78125rem;
    left: -0.390625rem;
    width: 4.5625rem;
    height: 2.5625rem;
    padding: .359375rem;
    background-image: url(../images/作品03/椭圆3.png);
    background-size: contain;
}
.ad2 .ad2b p {
    font-size: .140625rem;
    color: #fff;
}
.ad2 .ad2b h4:nth-child(1) {
    font-size: .28125rem;
    font-weight: 500;
    color: #fff;
}
.ad2 .ad2b h3:nth-child(2) {
    font-size: .28125rem;
    font-weight: 900;
    color: #fff;
    padding-left: 0;
    opacity: 1;
}
.ad2 .ad2b div:nth-child(4) {
    width: .015625rem;
    height: .3125rem;
    margin: 0 .078125rem;
    background-color: #fff;
}
.ad2 .ad2c {
    position: absolute;
    right: 0rem;
    top: -0.390625rem;
    width: 4rem;
    height: 7.125rem;
    background-image: url(../images/作品03/手机样机.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.pro {
    /* display: flex; */
    width: 10rem;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin: .78125rem auto;
}
.pro .pro1 {
    margin: .625rem 0;
}
.pro .pro1 ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pro .pro1 ul li:nth-child(1) {
    width: .46875rem;
    height: .515625rem;
    line-height: .515625rem;
    font-size: .28125rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-image: url(../images/作品03/图层6.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.pro .pro1 ul li:nth-child(3) {
    font-size: .140625rem;
    margin: .078125rem 0 .234375rem 0;
}
.pro .pro1 ul li:nth-child(4) {
    display: flex;
    flex-direction: row;
    position: relative;
}
.pro .pro1 ul li:nth-child(4) span {
    height: 1.40625rem;
    overflow: hidden;
}
.pro .pro1 ul li:nth-child(4) div {
    display: flex;
    flex-direction: row;
    position: absolute;
    margin: 0 auto;
    left: .78125rem;
    width: 8.59375rem;
    height: 1.40625rem;
    padding: .3125rem;
    background-color: #fff;
    box-shadow: .007813rem .078125rem .3125rem #e0e0e0;
    border-radius: .625rem 0 .625rem 0;
}
.pro .pro1 ul li:nth-child(4) div img {
    width: .15625rem;
    height: .15625rem;
    margin-right: .15625rem;
}

/* pro2 */
.pro .pro2 ul {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-start;
}
.pro .pro2 ul li.pro2up {
    width: .46875rem;
    height: .515625rem;
    line-height: .515625rem;
    font-size: .28125rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-image: url(../images/作品03/图层6.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.pro .pro2 ul li:nth-child(3) {
    font-size: .140625rem;
    margin: .078125rem 0 .234375rem 0;
}
.pro .pro2 ul li:nth-child(4) {
    position: relative;
    height: 4.296875rem;
}
.pro .pro2 ul li:nth-child(4) .pro2a {
    display: flex;
    flex-direction: row;
    position: absolute;
    margin: 0 auto;
    width: 6.25rem;
    height: 2.96875rem;
    padding: .625rem;
    background-color: #fff;
    box-shadow: .007813rem .078125rem .3125rem #e0e0e0;
    border-radius: .625rem 0 .625rem 0;
}
.pro .pro2 ul li:nth-child(4) .pro2a .touxiang {
    width: 2.1875rem;
    height: 2.34375rem;
    margin-right: .3125rem;
}
.pro2a div:nth-child(2) h3{
    margin-block-end: .15625rem;

}
.pro .pro2 ul li:nth-child(4) .pro2b {
    position: absolute;
    top: 1.5625rem;
    left: 5.3125rem;
    width: 4.6875rem;
    height: 3.125rem;
    padding: .234375rem .625rem;
    background-color: #fff;
    box-shadow: .007813rem .078125rem .3125rem #e0e0e0;
    border-radius: .625rem 0 .625rem 0;
}
.pro2b h3 {
    margin: .15625rem 0;
}
.pro2b p {
    font-size: .140625rem;

}
.pro .pro2 ul li:nth-child(4) .pro2b ul li {
    display: flex;
    flex-direction: row;
    /* 此处有一个ul li 命名冲突的问题 ,注意避免,下次得要系统模块明名*/
    margin: .078125rem 0 .234375rem 0;
}
.pro .pro2 ul li:nth-child(4) .pro2b ul img {
    width: .15625rem;
    height: .15625rem;
    margin-right: .15625rem;
}
.pro .pro2 ul li:nth-child(4) span {
    position: absolute;
    display: block;
    left: 6.25rem;
    width: 3.75rem;
    height: 6.875rem;
    overflow: hidden;
    z-index: -1;
}

/* pro3 */
.pro .pro3 {
    position:relative;
}
.pro .pro3 ul {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-start;
}
.pro .pro3 ul li {
    margin: .039063rem 0;
}
.pro .pro3 ul li.pro2up {
    width: .46875rem;
    height: .515625rem;
    line-height: .515625rem;
    font-size: .28125rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-image: url(../images/作品03/图层6.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.pro .pro3 ul li:nth-child(4) {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: .625rem 0;
    width: 10rem;
    height: 3.125rem;
    /* background-color: #ccc; */
    text-align: center;
}
.pro .pro3 ul li:nth-child(4) .el1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1.6875rem;
    height: 1.953125rem;
    color: #fff;
    background-image: url(../images/作品03/形状8.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.pro .pro3 ul li:nth-child(4) .el1 h3 {
    font-size: .375rem;
    margin: .00625rem 0;
}
.pro .pro3 ul li:nth-child(4) .el p {
    font-size: .140625rem;
    margin: .234375rem 0;
}

/* code */

section.code {
    margin: .78125rem auto;
    width: 10rem;
}
.code1 ul li {
    margin: .039063rem 0;
}
.code1 ul li.pro2up {
    width: .46875rem;
    height: .515625rem;
    line-height: .515625rem;
    font-size: .28125rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-image: url(../images/作品03/图层6.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.code1 ul li:nth-child(4) {
    margin: 1.5625rem 0 .78125rem 0;
    text-align: right;
    font-size: .1875rem;
}
.code2 {
    display: flex;
    flex-direction: row;
    border-bottom: .007813rem solid #dddddd;
    padding: .3125rem 0;
   /*  background-image: url(../images/作品04/形状1.png);
    background-size: contain;
    background-repeat: no-repeat;
*/
}
.code2 p {
    margin: .234375rem 0;
}
.code3 {
    padding: .78125rem 0 .46875rem 0;
    border-bottom: .007813rem solid #dddddd;
    /* overflow: hidden; */
}
.code3 p {
    margin: .234375rem 0;

}
.code3 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* code4 */
.code4 p {
    margin: .234375rem 0;
}
.code4 {
    padding: .78125rem 0 .46875rem 0;
    border-bottom: .007813rem solid #dddddd;
}
.code4 ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.code4 p {
    margin: .234375rem 0;
}
.code4 ul li:nth-child(2) p:nth-child(1) {
    font-weight: 200;
}
.code4 ul li:nth-child(2) p:nth-child(2) {
    font-weight: 500;
}
.code4 ul li:nth-child(2) p:nth-child(3) {
    font-weight: 800;
}


/*  process */
section.process {
    margin: .78125rem auto;
    width: 10rem;
}
.cess1 ul li {
    margin: .039063rem 0;
}
.cess1 ul li.pro2up {
    width: .46875rem;
    height: .515625rem;
    line-height: .515625rem;
    font-size: .28125rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-image: url(../images/作品03/图层6.png);
    background-size: contain;
    background-repeat: no-repeat;
}
/* cess2&cess3 */
.cess2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .3125rem auto;
    padding: .625rem 0;
    background-color: #f5f6f8;
}
.cess2 div {
    width: 80%;
}
.cess2 p {
    margin: .078125rem 0 .234375rem 0;
}

.cess3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: .3125rem auto;
    padding: .625rem 0;
    background-color: #f5f6f8;
}
.cess3 div {
    width: 80%;
}
.cess3 p {
    margin: .078125rem 0 .234375rem 0;
}


/* yunying */
.yunying  {
    width: 10rem;
    margin: 0 auto;
}
.yunying .yunying1 {
    margin: .234375rem auto .625rem auto;
}
.yunying1 .yy1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: .234375rem auto .625rem auto;
}
.yunying1 .yy1 img:nth-child(1) {
    height: .351563rem;
    width: .351563rem;
    margin-right: .078125rem;
}
.yunying1 .yy1 p:nth-child(2) {
    height: .351563rem;
    line-height: .351563rem;
}
.yunying1 .yy1 div:nth-child(3) {
    height: .015625rem;
    width: 4.6875rem;
    padding-left: .390625rem;
    margin-left: .15625rem;
    background-color: #1d41eb ;
}

/* yunying2 */
.yunying .yunying2 {
margin: .234375rem auto .625rem auto;
}
.yunying2 .smtitle {
margin: .15625rem 0;
}
.yunying2 .smtitle p {
font-size: .1875rem;
text-align: end;
color: #1d41eb;
}
.yunying2 .lunbo1 {
display: flex;
flex-direction: row;
}
.lunbo1 .silu {
position: relative;
width: 3.125rem;
height: 3.90625rem;
padding: .390625rem .234375rem .390625rem .234375rem;
background-color: #1d41eb;
color: #fff;
}
.lunbo1 .silu .shuxian {
position: absolute;
left: .15625rem;
width: .007813rem;
height: 100%;
background-color: #fff;
}
.lunbo1 .silu h3 {
margin: .625rem 0 .078125rem 0;
}
.lunbo1 .silu p {
margin-bottom: .3125rem;
opacity: .7;
}
.lunbo1 .poster1 {
 position: relative;
    /* width: 6.875rem; */
    width: 100%;
    /* height: 3.75rem; */
    overflow: hidden;
  }
.lunbo1 .swiper-slide {
    text-align: center;
    font-size: .140625rem;
    background: #999;
    /* Center slide text vertically */
    display: flex;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
}
.lunbo1 .swiper-slide-active,.lunbo1 .swiper-slide-duplicate-active{
    transform: scale(1);
}
/* yunying3 */
.yunying .yunying3 {
margin: .234375rem auto .625rem auto;
padding: .15625rem .234375rem;
background-color: #eef2f8;
overflow: hidden;
}
.yunying3 .smtitle p {
font-size: .1875rem;
color: #1d41eb;
}
.yunying3 .poster2 {
position: relative;
width: 100%;
/* height: 5.46875rem; */
overflow: hidden;
}
.yunying3 .swiper-slide {
text-align: center;
font-size: .140625rem;
background: #999;
/* Center slide text vertically */
display: flex;
align-items: center;
transition: 300ms;
transform: scale(0.8);
}
.yunying3 .swiper-slide-active,.yunying3 .swiper-slide-duplicate-active{
transform: scale(1);
}

/* yunying4 */
.yunying .yunying4 {
margin: .234375rem auto .625rem auto;
padding: .15625rem .234375rem;
background-color: #eef2f8;
overflow: hidden;
}
.yunying4 .smtitle p {
font-size: .1875rem;
color: #1d41eb;
}
.yunying4 .poster3 {
position: relative;
width: 100%;
/* height: 5.46875rem; */
overflow: hidden;
}
.yunying4 .swiper-slide {
text-align: center;
font-size: .140625rem;
background: #999;
/* Center slide text vertically */
display: flex;
align-items: center;
transition: 300ms;
transform: scale(0.8);
}
.yunying4 .swiper-slide-active,.yunying4 .swiper-slide-duplicate-active{
transform: scale(1);
}


/* album1 */
.album {
width: 10rem;
margin: .234375rem auto .625rem auto;
}

.album .album1 ul {
display: flex;
flex-direction: column;
position: relative;
align-items: flex-start;
}
.album .album1 ul li.pro2up {
width: .46875rem;
height: .515625rem;
line-height: .515625rem;
font-size: .28125rem;
font-weight: 600;
text-align: center;
color: #fff;
background-image: url(../images/作品03/图层6.png);
background-size: contain;
background-repeat: no-repeat;
}
.album .album1 ul li:nth-child(3) {
font-size: .140625rem;
margin: .078125rem 0 2.34375rem 0;
}

.album2 .uptitle {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: .78125rem;
}
.album2 p {
text-align: center;
}
.uptitle .right {
text-align: end;
}
.alpic1 {
display: grid;
grid-template-columns: 2fr 3fr 2fr 4fr;
grid-template-rows: 1.90625rem;
grid-column-gap: .15625rem;
margin-bottom: .3125rem;
}
.alpic1 div {
overflow: hidden;
}

.alpic2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 3.46875rem;
grid-column-gap: .15625rem;
padding: .390625rem 0;
border-bottom: 1px solid #999;
}
.midtitle {
margin: .625rem 0 .3125rem 0;
}
.midtitle p {
text-align: start;
margin: .15625rem 0;
}
.alpic3 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 15px;
padding: 20px 0 50px 0;
border-bottom: 1px solid #999;
}

/* alpic4 */

.alpic4 {
overflow: hidden;
}
.alpic4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 6fr 6fr;
grid-column-gap: 20px;
grid-row-gap: 15px;
padding: 20px 0 50px 0;
border-bottom: 1px solid #999;
}
.footer .ditu {
    width: 10rem;
    margin: 0 auto;
}
/* 底部滚动图标 */
.scrollToTop{
display: none;
position: relative;
z-index: 300;
}
.scrollToTop a{
width: 32px;
height: 32px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background-color: #1d41eb;
color: #fff;
text-decoration: none;
position: fixed;
bottom: 60px;
right: 30px;
}
/* .scrollToTop a{
    width: .25rem;
    height: .25rem;
    border-radius: .03125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d41eb;
    color: white;
    text-decoration: none;
    position: fixed;
    bottom: .46875rem;
    right: .234375rem;
    } */
    @media screen and (min-width:1280px) {
        html {
            font-size: 128px !important;
          }
          p {
              font-size: .140625rem;
          }
          h2 {
            font-size: .25rem;
        }
          h3 {
              font-size: .1875rem;
          }
          h4 {
            font-size: .171875rem;
        }
 
     }
    @media screen and (max-width:1180px) {
        /*  section {
               padding: 0 20px !important; 
           }  */
         p {
             font-size: .1875rem;
         }
         h2 {
           font-size: .24125rem;
       }
         h3 {
             font-size: .25rem;
         }
         h4 {
           font-size: .21875rem;
       }
       .item .pic p {
           font-size: .1875rem;
       }
       .item4 {
        position: absolute;
        right: .390625rem;
        bottom: 0.1rem;
        width: 1.054688rem;
        height: 1.054688rem;
    }
     
         /* 折叠按钮 */
     
         header nav{
             display: none;
           }
           header {
             grid-template-columns: repeat(2,1fr);
           }
           header .burger{
             display: block;
             width: 20px;
             height: 6px;
             position: relative;
             justify-self: end;
             cursor: pointer;
           }
           .burger-line1,
           .burger-line2,
           .burger-line3{
            width: 20px;
            height: 2px;
            background-color: #fff;
           }
           .burger-line1{
             position: absolute;
             top: -6px;
           }
           .burger-line3{
             position: absolute;
             top: 6px;
           }
       
       header.open nav{
         display: grid;
         position: absolute;
         left: 0;
         top: 0;
         width: 100vw;
         height: 50vh;
         background-color: white;
         grid-auto-rows:max-content ;
         justify-items: end;
         padding: 0 40px;
         opacity: 0;
         animation: slideDown 0.6s ease-out forwards;
       }
       header.open nav> * {
         color: #707070;
         animation: showMenu 0.5s linear forwards 0.4s;
         font-size: 18px;
         margin: 4px 0;
         opacity: 0;
       }
       header.open nav>i{
         margin-top: 10px;
       }
       header.open .burger-line1,
       header.open .burger-line2,
       header.open .burger-line3,
       header.sticky .burger-line1,
       header.sticky .burger-line2,
       header.sticky .burger-line3{
        background-color: #333;
        transition: 0.4s ease;
       }
       header.open .burger-line1{
         transform: rotate(45deg) translate(3px,5px);
       }
       header.open .burger-line2{
         transform: translateX(5px);
         opacity: 0;
       }
       header.open .burger-line3{
         transform: rotate(-45deg) translate(3px,-5px);
       }
       header.open .logo{
         z-index: 40;
         color: var(--text-color-darker);
       }
       @keyframes slideDown{
         from{
           height: 0;
           opacity: 0;
         }
         to{
           height: 100vh;
           padding-top: 80px;
           opacity: 1;
         }
       }
       @keyframes showMenu{
         from {
           opacity: 0;
           transform: translateY(-1vh);
         }
         to{
           opacity: 1;
           transform: translateY(0);
         }
       }

       
        section.intro {
            background-color: #381be5;
            padding: .53125rem 0;
        }
        section.intro .title1 {
            position: relative;
            width: 10rem;
            height: .625rem;
            padding: 0 30px;
            margin: 0 auto;
            /* overflow: hidden; */
        }
        .title1 ul {
            position: absolute;
            right: 30px;
        }
        .items {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: 1.53125rem 1.53125rem;
            grid-column-gap: 1.5625rem;
            grid-row-gap: .625rem;
            width: 10rem;
            margin: .507813rem auto;
            color: #fff;
        }
        section.me {
            background-color: #fff;
            padding: .53125rem 30px;
        }
        .works2 .jingli {
            padding: .3125rem 30px .3125rem .875rem;
        }
        .xiucai,.huaimei {
            padding: 0 15px;
        }
        section.advertise {
            padding: 0.53125rem 30px;  
        } 
        .xiangqing .ad1 {
            padding: 15px 0;
        }
        .pro {
            padding: 0 30px;
        }
        section.code {
            padding: 0 30px;
        }
        .code2 p {
            padding-right: 30px;
        }
        section.process {
            padding: 0 30px;
        }
        .yunying {
            padding: 0 30px;
        }
        
.lunbo1 .poster1 {
    height: 100%;
}
.album {
    width: 10rem;
    margin: .234375rem auto .625rem auto;
    padding: 0 30px;
}
        
       }
    @media screen and (max-width:750px) {
          p {
              font-size: .140625rem;
          }
          h2 {
            font-size: .25rem;
        }
          h3 {
              font-size: .1875rem;
          }
          h4 {
            font-size: .171875rem;
        }
        .zhuti ul li:nth-child(3) {
            top: 2.04375rem; 
           }
 
     }
      
      
    

